<template>
	<view class="content">
        <u-navbar id="navbar" bgColor="#fff" 
            :fiexd="true" :safeAreaInsetTop="true" :placeholder="true"
            leftIconColor="#151C24" @leftClick="back"
            title="联系我们" titleColor="#151C24">
        </u-navbar>
        <view id="subsection">
            <u-subsection bgColor="#fff" fontSize="14" :list="tab" :current="current" @change="cut"></u-subsection>
        </view>

        <view class="uni-area">
            <swiper class="swiper" :current="current" @change="cut" :style="{height:swiperH+'px'}">
                <!-- 监管部门 -->
                <swiper-item>
                    <view class="swiper-item">
                        <view class="uni-shadow">
                            <view class="uni-table">
                                <u-row class="uni-tr">
                                    <u-col span="6" textAlign="center" class="u-font-28 font-bold">监察部门名称</u-col>
                                    <u-col span="6" textAlign="center" class="u-font-28 font-bold">联系方式</u-col>
                                </u-row>
                                <u-row v-for="(item,index) in table" :key="index" class="uni-tr">
                                    <u-col span="6" textAlign="center" class="u-font-28">{{item.districtName}}</u-col>
                                    <u-col span="6" textAlign="center">
                                        <uni-phone :phone="item.telephone" />
                                    </u-col>
                                </u-row>
                            </view>
                        </view>
                    </view>
                </swiper-item>
                <!-- 服务团队 -->
                <swiper-item>
                    <view class="swiper-item">
                        <view class="uni-shadow">
                            <view class="uni-table">
                                <u-row class="uni-tr">
                                    <u-col span="6" textAlign="center" class="u-font-28 font-bold">服务团队名称</u-col>
                                    <u-col span="6" textAlign="center" class="u-font-28 font-bold">联系方式</u-col>
                                </u-row>
                                <u-row v-for="(item,index) in table" :key="index" class="uni-tr">
                                    <u-col span="6" textAlign="center" class="u-font-28">{{item.districtName}}</u-col>
                                    <u-col span="6" textAlign="center">
                                        <uni-phone :phone="item.telephone" />
                                    </u-col>
                                </u-row>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                systemInfo: uni.getStorageSync('systemInfo'),
                swiperH: 731,
				tab:['监管部门', '服务团队'],
                current: 0,
                table:[
                    // { districtName:'第一师服务团队', telephone:'15334527675' },
                    // { districtName:'第一师服务团队', telephone:'15334527675' },
                ]
			}
		},

        onReady(){
            uni.createSelectorQuery().in(this).select('#subsection').boundingClientRect(res => {
                this.swiperH = this.systemInfo.normalContentH - res.height
            }).exec();
        },

		onLoad() {
            // 获取数据
            this.getData()
		},

		methods: {
            back(){
                uni.navigateBack()
            },

            // 切换
            cut(e){
                const index = e.detail?e.detail.current:e
                if( this.current != index ){
                    this.current = index
                    this.getData()
                }
            },

            // 获取数据
            getData(){
                uni.showLoading({ title:'数据获取中' })
                this.$request(this,this.$apis.contactus,{ type:this.current+1 }).then(res=>{
                    if( this.current+1 == 1 ){
                        // console.log('监管部门',res)
                    }else{
                        // console.log('服务团队',res)
                    }
                    this.table = res
                }).then()
            }
		}
	}
</script>

<style lang="scss">
    .content{
        #subsection{
            background: $uni-text-color-inverse;;
            padding: 0 30rpx;
            position: relative;
            z-index: 100;
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.07);
        }

        .swiper-item{
            background: $uni-text-color-inverse;
            margin: 30rpx 0;
        }

        .uni-table{
            border: 1rpx solid #eee;
            .uni-tr{
                height: 80rpx;
                &:nth-child(odd){
                    background: #F6F7F8;
                }
                &:nth-child(even){
                    background: #fff;
                }
            }
        }
        /deep/ uni-swiper .uni-swiper-wrapper {
            overflow-y: auto !important;
        }
        /deep/ uni-swiper-item {
            overflow-y: auto !important;
        }
    }
</style>
